<template>
    <BaseCard></BaseCard>

    <BaseCard>

        <!-- 使用封装的表格组件 -->
        <BaseTable :data="couponData.rows" :total="couponData.total" :columns="columns" v-model:pageData="pageData">

            <template #toolbar>

                <el-button type="primary" v-permission="'添加优惠券'"
                    @click="$router.push('/admin/marketing/store_coupon_issue/create')">添加优惠券</el-button>


                <el-button v-permission="'添加优惠券'" type="primary" @click="toAdd">添加优惠券</el-button>
            </template>

            <template #state>
                <el-switch />
            </template>

            <template #action="{ row }">
                <el-button type="primary" link>领取记录</el-button>
                <el-button type="primary" v-permission="'编辑优惠券'" link @click="toUpdate(row._id)">编辑</el-button>
                <el-button type="primary" link>复制</el-button>
                <el-button type="primary" v-permission="'删除优惠券'" link>删除</el-button>
            </template>

            <template #price="scope">
                {{ parseFloat(scope.row.price).toFixed(2) }}
            </template>
        </BaseTable>

    </BaseCard>
</template>

<script setup lang="ts">
import { useFindData } from '@/composables/findData';
import { onMounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const { couponData, findCouponAsync } = useFindData();


const columns: ColumnItem[] = [
    { label: '优惠券名称', prop: 'name' },
    { label: '优惠券类型', prop: 'typeId.name' },
    { label: '面值', prop: 'price', settings: { sortable: true } },
    { label: '领取方式', prop: 'post_type' },
    { label: '是否开启', prop: 'state', align: 'center' },
    { label: '操作', prop: 'action', width: 240 },
]

const pageData = ref<{ currentPage: number, pageSize: number }>({
    currentPage: 1,  // 当前页码
    pageSize: 5,    // 每页数据条数
})

watch(pageData, () => {
    findCoupon();
}, { deep: true })

onMounted(() => {
    findCoupon();
})


function findCoupon() {
    findCouponAsync(pageData.value);
}

const toAdd = () => {
    router.push('/admin/marketing/store_coupon_issue/create')
}

const toUpdate = (_id: string) => {
    // 路径参数
    // router.push('/admin/marketing/store_coupon_issue/update/' + _id);
    router.push(`/admin/marketing/store_coupon_issue/update/${_id}`);
    // router.push({
    //     name: 'CouponUpdate',
    //     params: { _id: _id }
    // })

    // 查询参数
    // router.push('/admin/marketing/store_coupon_issue/update?_id=' + _id)
    // router.push({
    //     name: 'CouponUpdate',
    //     query: { _id }
    // })
}
</script>

<style scoped></style>